import React, { Component } from 'react';
import { Col } from 'antd';
import style from './chart-fangke.module.css';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
class FangKe extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    const data = [
      {
        year: "1 月",
        sales: 38
      },
      {
        year: "2 月",
        sales: 52
      },
      {
        year: "3 月",
        sales: 61
      },
      {
        year: "4 月",
        sales: 145
      },
      {
        year: "5 月",
        sales: 48
      },
      {
        year: "6 月",
        sales: 38
      },
      {
        year: "7 月",
        sales: 38
      },
      {
        year: "8 月",
        sales: 32
      },
      {
        year: "9 月",
        sales: 52
      },
      {
        year: "10 月",
        sales: 79
      },
      {
        year: "11 月",
        sales: 20
      },
      {
        year: "12 月",
        sales: 17
      },
    ];
    const cols = {
      sales: {
        tickInterval: 20
      }
    };
    return (
      <Col xs={24} sm={24} md={24} lg={24} xl={16} className={style.check}>
        <div className={style.chart_header}>
          <div className={style.chart_header_title}>
            <span>访问情况</span>
            <p>Access situation</p>
          </div>
        </div>
        <div className={style.chart_div}>
          <Chart height={400} data={data} scale={cols} forceFit>
            <Axis name="year" />
            <Axis name="sales" />
            <Tooltip
              crosshairs={{
                type: "y"
              }}
            />
            <Geom type="interval" position="year*sales" />
          </Chart>
        </div>
      </Col>
    );
  }
}

export default FangKe;